<template>
	<view class="zai-box">
		<image src="../../static/images/login/login.png" mode='aspectFit' class="zai-logo"></image>
		<view class="zai-title">登陆</view>
		<view class="zai-form">
			<input class="zai-input" type="number" :value="phone" @blur="blur_phone" maxlength="11" placeholder="请输入手机号18092444782" />
			<view class="zai-input-btn">
				<input class="zai-input" maxlength="4" placeholder-class placeholder="验证码1234"/>
				<view class="zai-checking" @click="checking" v-if="state===false">获取验证码</view>
				<view class="zai-checking zai-time" v-if="state===true">倒计时{{ currentTime }}s</view>
			</view>
			<button class="zai-btn" @click="login">登陆/注册</button>
		</view>
	</view>
</template>
<script>
	import tuiIcon from "@/components/icon/icon.vue"
	import Login from './login-model.js'   
	var login = new Login();  
	export default {
		components: {
			tuiIcon
		},
		data() {
			return {
				state: false,		//是否开启倒计时
				totalTime: 60,		//总时间，单位秒
				recordingTime: 0, 	//记录时间变量
				currentTime: 0, 	//显示时间变量
				phone:'18092444782',//手机号
				// #ifdef MP-WEIXIN
				provider:1,	
				//#endif
				// #ifdef H5
				provider:2,	
				//#endif
				// #ifdef APP-PLUS
				provider:4,	
				//#endif
			}
		},
		onLoad() {
			
		},
		methods: {
			//点击登陆注册
			login(){
				var that = this;
				var phone = that.phone;
				if(!login.is_phone_number(phone)){
					login.show_tips({title: '请输入正确的手机号'});
					return;
				}
				var data = {
					provider:that.provider,
					type:1,
					phone:phone
				};
				login.login(data,(res)=>{
					if(res.code == 8888){
						login.set_storage('token',res.data.token);
						login.set_storage('token_type',res.data.token_type);
						login.switch_tab('../my/my');
					}
				})
			},
			
			blur_phone(event){
				var that = this;
				that.phone = event.detail.value;
			},
			//点击获取验证码
			checking() {
				var that = this;
				//把显示时间设为总时间
				that.currentTime = this.totalTime;
				//开始倒计时
				that.state = true;
				//执行倒计时
				that.checkingTime();
			},
			checkingTime(){
				var that = this;
				//判断是否开启
				if(that.state){
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if(that.currentTime > 0 && that.recordingTime <= that.totalTime){
						//记录时间增加 1
						that.recordingTime = that.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						that.currentTime = that.totalTime - that.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => { 	
							//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
							that.checkingTime();
						}, 1000)
					}else{
						//时间已完成，还原相关变量
						that.state = false;		//关闭倒计时
						that.recordingTime = 0;	//记录时间为0
						that.currentTime = that.totalTime;	//显示时间为总时间
					}
				}else{
					//倒计时未开启，初始化默认变量
					that.state = false;
					that.recordingTime = 0;
					that.currentTime = that.totalTime;
				}
			}
		}
	}
</script>

<style>
	@import url("login.css");
</style>
